<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>方维网站后台管理系统_深圳网站建设</title>
    <meta name="author" content="深圳方维网络科技有限公司 http://www.szfangwei.cn" />
    <import type="css" file="admin/css/index" />
    <import type="js" file="common/jquery171min" />
    <style type="text/css">
        .spec_list li{float:left;line-height:20px;padding:5px 10px;}
        .list table{border-collapse:collapse;border:1px solid #ddd;width:798px;}
        .list table th{border:1px solid #ddd;padding:5px;}
        .list table td{border:1px solid #ddd;padding:5px;}
        .list table td.td_spec{color:#666;}
    </style>
</head>
<body>
<div class="search"  style="width:780px;" >
    <ul class="spec_list">
       <foreach name="spec_list" item="spec_item">
           <li><label><input class="checkbox_list" type="checkbox" id="spec_id_{$spec_item.spec_id}" name="spec_id" value="{$spec_item.spec_id}" />{$spec_item.spec_name}</label>
           <input type="hidden" id="spec_value_{$spec_item.spec_id}"  value="{$spec_item.spec_value}" />
           <input type="hidden" id="spec_name_{$spec_item.spec_id}" value="{$spec_item.spec_name}" />
           <input type="hidden" id="spec_type_{$spec_item.spec_id}" value="{$spec_item.spec_type}" />
           </li>
       </foreach>
    </ul>
    <div class="c"></div>
</div>
<div class="list">
    <table>
        <thead>
        <tr><th width="70px">规格名称</th>
            <th>选择组合规格参数</th>
        </tr>
        </thead>
        <tbody id="tbody_spec">
        </tbody>
        <tfoot>
            <tr><td colspan="2" style="padding-left:80px;"><input type="button" onclick="complete_set_spec()" value="确定选择" class="btn1"  /></td></tr>
        </tfoot>
    </table>
</div>
<script src="__PUBLIC__/common/artDialog4.1.7/artDialog.source.js?skin=blue"></script>
<script src="__PUBLIC__/common/artDialog4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
    //规格选择事件
    $(".checkbox_list").click(function(){
        $("#tbody_spec").html('');
        $('input[name="spec_id"]:checked').each(function(){
            add_sel($(this).val());
        });
    });
    //规格选择子事件
    function add_sel(spec_id) {
        var spec_value = $("#spec_value_"+spec_id).val();
        var spec_name = $("#spec_name_"+spec_id).val();
        var arr = spec_value.split(",");
        var str = '<tr><td class="td_spec">'+spec_name+'</td><td>';
        for(var i=0;i<arr.length;i++) {
           str += '<label><input type="checkbox" name="attr_'+spec_id+'" id="attr_'+spec_id+'" value="'+arr[i]+'" />'+arr[i]+'</label>&nbsp;';
        }
        str += '</td></tr>';
        $("#tbody_spec").append(str);
    }
    //完成选择
    function complete_set_spec() {
        var str = '';
        //循环遍历选中规格类
        $('input[name="spec_id"]:checked').each(function(index){
            var spec_id = $(this).val();
            var spec_name = $("#spec_name_"+spec_id).val();
            var spec_type = $("#spec_type_"+spec_id).val();
            var str2 = '';
            $('input[name="attr_'+spec_id+'"]:checked').each(function(){
                str2 += $(this).val() + '|';
            });
            //有选项值
            if(str2.length > 0) {
                str2 = str2.substring(0,str2.length-1);
                
               if(index>0) str += ',';
               str += '"'+(index+1)+'":{"id":"'+spec_id+'","name":"'+spec_name+'","type":"'+spec_type+'","val":"'+str2+'"}';
            } 
        });
        str = '{'+str+'}';
        //复制给父框架，同时关掉窗口
        var top = art.dialog.top;
        top.document.getElementById('sel_spec_value').value = str;
        top.show_spec();
        var api = art.dialog.open.api;
        api.close();
    }
</script>
</body>
</html>
